<template>
  <div class="courses">
    <div class="courses-header">
      <h1>课程中心</h1>
      <p>选择适合您的安全生产培训课程</p>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select v-model="filters.category" placeholder="课程分类" clearable>
            <el-option
              v-for="category in categories"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="filters.level" placeholder="难度等级" clearable>
            <el-option label="初级" value="初级" />
            <el-option label="中级" value="中级" />
            <el-option label="高级" value="高级" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="filters.sort" placeholder="排序方式" clearable>
            <el-option label="最新" value="newest" />
            <el-option label="热门" value="popular" />
            <el-option label="价格升序" value="price_asc" />
            <el-option label="价格降序" value="price_desc" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="filters.keyword"
            placeholder="搜索课程"
            prefix-icon="Search"
            @keyup.enter="handleSearch"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 课程列表 -->
    <div class="course-list">
      <div v-if="loading" class="loading">
        <el-skeleton :rows="3" animated />
      </div>
      
      <div v-else-if="courses.length === 0" class="empty">
        <el-empty description="暂无课程" />
      </div>
      
      <div v-else class="course-grid">
        <CourseCard
          v-for="course in courses"
          :key="course.id"
          :course="course"
        />
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[12, 24, 36, 48]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import CourseCard from '@/components/CourseCard.vue'
import { getCourses, getCategories } from '@/api/courses'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const courses = ref([])
const categories = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)

const filters = reactive({
  category: '',
  level: '',
  sort: '',
  keyword: ''
})

const fetchCourses = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      limit: pageSize.value,
      ...filters
    }
    
    const response = await getCourses(params)
    courses.value = response.data.courses
    total.value = response.data.total
  } catch (error) {
    console.error('获取课程失败:', error)
  } finally {
    loading.value = false
  }
}

const fetchCategories = async () => {
  try {
    const response = await getCategories()
    categories.value = response.data
  } catch (error) {
    console.error('获取分类失败:', error)
  }
}

const handleSearch = () => {
  currentPage.value = 1
  fetchCourses()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchCourses()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchCourses()
}

// 监听筛选条件变化
watch(
  () => filters,
  () => {
    currentPage.value = 1
    fetchCourses()
  },
  { deep: true }
)

// 监听路由参数
watch(
  () => route.query,
  (newQuery) => {
    filters.category = newQuery.category || ''
    filters.keyword = newQuery.keyword || ''
    fetchCourses()
  }
)

onMounted(() => {
  fetchCategories()
  fetchCourses()
})
</script>

<style scoped>
.courses {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.courses-header {
  text-align: center;
  margin-bottom: 40px;
}

.courses-header h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 10px;
}

.courses-header p {
  font-size: 18px;
  color: #666;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.course-list {
  margin-bottom: 30px;
}

.loading {
  padding: 40px;
}

.empty {
  padding: 60px 0;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
}
</style>
